<template>
	<view>
		<view class="post-item">
			<view class="post-item-top-user">
				<view>
					<u-avatar class="avatar" :customStyle="{marginRight:'20rpx'}"
						:src="'https://wjlm.goldsu.cn'+postUser.pic"></u-avatar>
				</view>
				<view class="center">
					<view style="display: flex;align-items: center;">
						<text class="username">{{postUser.user }}</text>
					</view>
					<view>
						<text class="time">{{ postDetail.create_time }}</text>
					</view>
				</view>

			</view>
			<view class="post-content">
				<view class="post-content-wrap u-line-5">
					<text>{{postDetail.content}}</text>
				</view>
				<video v-if="postDetail.video" :src="postDetail.video" class="img-style-1" object-fit="cover"></video>
				<block v-else>
					<!--一张图片-->
					<block v-if="postDetail.images.length == 1">
						<image :lazy-load="true" mode="widthFix" class="img-style-1" :src="postDetail.images[0]"
							@tap.stop="previewImage(postDetail.images[0], postDetail.images)">
						</image>
					</block>
					<!--二张图片-->
					<block v-if="postDetail.images.length == 2">
						<view class="img-style-2">
							<image :lazy-load="true" v-for="(mediaItem, index2) in postDetail.images" :key="index2"
								@tap.stop="previewImage(mediaItem, postDetail.images)" mode="aspectFill"
								:src="mediaItem"></image>
						</view>
					</block>
					<!--三张以上图片-->
					<block v-if="postDetail.images.length > 2">
						<view class="img-style-3">
							<image :lazy-load="true" v-for="(mediaItem, index2) in postDetail.images" :key="index2"
								@tap.stop="previewImage(mediaItem, postDetail.images)" mode="aspectFill"
								:src="mediaItem"></image>
						</view>
					</block>
				</block>
			</view>

			<!-- 底部 -->
			<view class="p-footer">
				<view class="p-item">
					<u-icon name="share" size="40rpx"></u-icon>
					<text class="count">分享</text>
					<button open-type="share"></button>
				</view>
				<view class="p-item">
					<u-icon name="chat" size="40rpx"></u-icon>
					<text class="count">{{ postDetail.comment_count }}</text>
				</view>
				<view class="p-item" @click.stop="addCollection(postDetail)">
					<u-icon size="40rpx" :name="postDetail.status?'heart-fill':'heart'"
						:color="postDetail.status?'#e62e00':'#bfbfbf'"></u-icon>
					<text class="count">{{ postDetail.like_count }}</text>
				</view>
			</view>
		</view>
		<!-- 
		<view class="info-box">
			<view style="margin:10rpx 30rpx;color: #616161;font-size: 28rpx;">{{postDetail.create_time | timeFrom}}</view>
			<view class="p-footer">
				<block v-if="postDetail.is_like">
					<view class="p-item" @click="cancelCollection">
						<u-icon name="heart-fill" color="#d81e06" class="icon" size="45rpx"></u-icon>
						<text>{{ postDetail.thumb_num }}</text>
					</view>
				</block>
				<block v-else>
					<view class="p-item" @click="addCollection">
						<u-icon name="heart" class="icon" size="45rpx"></u-icon>
						<text>{{ postDetail.thumb_num }}</text>
					</view>
				</block>
				<view class="p-item" @click="focus = true">
					<u-icon name="chat" class="icon" size="45rpx"></u-icon>
					<text>{{ postDetail.comment_num }}</text>
				</view>
				<button open-type="share" class="u-reset-button p-item">
					<u-icon name="share-square" class="icon" size="45rpx"></u-icon>
					<text>分享</text>
				</button>
			</view>
		</view> -->


		<view class="comment-box">
			<view class="top-box">
				<view class="title">评论（{{ postDetail.comment_count }}）</view>
			<view class="sort-btn" @click="setType">
				<image src="../../static/sort.png" mode=""></image>
				<view class="">
					{{type==1?'按时间':'按热度'}}
				</view>
			</view>
			</view>
			
			<view style="margin-bottom: 40rpx;" v-for="(item, index) in commentList" :key="index">
				<view class="comment-item" @longpress="delComment(item, index)">
					<!-- 			<image  class="avatar" :src="item.user.pic"></image> -->
					<u-avatar :customStyle="{marginRight:'20rpx'}" class="avatar" :size="40"
						:src="'https://wjlm.goldsu.cn'+item.user.pic"></u-avatar>

					<view class="c-content" @click="onReply(item)">
						<view class="user">
							<text>{{ item.user.user }}</text>

							<view @click.stop="onThumb(item, index)" class="thumbs">
								<text class="num">{{ item.count }}</text>
								<u-icon class="icon" size="45rpx" name="heart-fill"
									:color="item.is_like?'#e62e00':'#bfbfbf'"></u-icon>
							</view>


						</view>
						<text class="c-txt" style="margin:10rpx 0;">{{ item.comment }}</text>
						<text class="time">{{$u.timeFrom(item.create_time, 'yyyy年mm月dd日 hh时MM分')}}</text>
					</view>
				</view>

				<!-- @click="onReply(item2, index, index2)" -->
				<view @longpress="delComment(item2, index, index2)" v-if="item.lookShow||index2<2"
					v-for="(item2, index2) in item.pid" :key="item2.id" class="sub-comment-item">
					<view class="user">
						<u-avatar :customStyle="{marginRight:'20rpx'}" class="avatar" :size="30"
							:src="'https://wjlm.goldsu.cn'+item2.user.pic"></u-avatar>
						<view class="u-head">
							<text>{{ item2.user.user }}</text>
							<!-- 				<view @click.stop="onThumb(item2, index, index2)" class="thumbs">
								<text class="num">{{ item.count }}</text>
								<u-icon class="icon" size="45rpx" name="heart-fill" :color="item2.is_like?'#e62e00':'#bfbfbf'"></u-icon>
							</view> -->

						</view>
					</view>
					<view class="reply" style="margin-top: 10rpx;">
						<!-- 	<text>回复</text>
						<navigator :url="'/pages/user/home?user_id=' + item2.to_user.id" hover-class="none"
							class="name">
							{{ item2.user.user }}：
						</navigator> -->
						<text style="color: #616161;">{{ item2.comment }}</text>
						<view class="time">{{ $u.timeFrom(item2.create_time, 'yyyy年mm月dd日 hh时MM分')  }}</view>
					</view>
				</view>

				<view class="look-comment" v-if="item.pid.length>2&&!item.lookShow" @click="lookComment(index)">
					查看更多
				</view>
			</view>
			<!-- 加载状态 -->
			<!-- 			<block v-if="commentList.length > 0">
				<view style="margin: 30rpx;">
					<u-loadmore :status="loadStatus" />
				</view>
			</block> -->
			<block v-if="commentList.length==0">
				<u-empty text="暂无评论" mode="message" icon="/static/empty.png"></u-empty>
			</block>
		</view>
		<view style="height: 100rpx;"></view>
		<!-- 评论输入框 -->
		<view class="comment-tool">
			<textarea :placeholder="placeholder" @blur="onBlur" :focus="focus" fixed="true" cursor-spacing="10"
				v-model="form.comment" auto-height="true" placeholder-class="txt-placeholder"></textarea>
			<u-button type="warning" :customStyle="{width:'100px'}" @click="addComment" :disabled="isSubmitD">发布
			</u-button>
		</view>
		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postId: 0,
				postDetail: {
				},
				postUser:{},
				focus: false,
				isSubmitD: false,
				commentList: [],
				placeholder: '说点什么...',
				form: {
					pid: 0,
					trends_id: '',
					comment: '',
				},

				page: 1,
				loadStatus: 'loadmore',
				discussList: [],
				userData: {},
				
				type:1
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onLoad(options) {
			this.postId = options.id;
			this.form.trends_id = options.id;
			this.getPostDetail();
			// this.getCommentList();
			this.userData = uni.getStorageSync("userData")
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			//#endif
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.getCommentList();
		// },
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			let imgURL;
			if (this.postDetail.media.length > 0) {
				imgURL = this.postDetail.media[0];
			}
			return {
				title: this.postDetail.content,
				path: '/pages/post/detail?id=' + this.postId,
				imageUrl: imgURL
			};
		},
		onShareTimeline() {
			let imgURL = (imgURL = this.postDetail.media[0]);
			return {
				title: this.postDetail.content,
				imageUrl: imgURL,
				query: 'id=' + this.postId
			};
		},
		methods: {
			setType(){
				this.type=this.type==1?0:1
				this.getPostDetail();
			},
			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				});
			},
			lookComment(index) {
				this.commentList[index].lookShow = true
				this.$forceUpdate()
			},
			// 删除评论
			delComment(e, index, index2) {

				let that = this;
				if (this.userData.id && e.user_id != this.userData.id) {
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确定删除该评论？',
					success: function(res) {
						if (res.confirm) {
							that.$myRuquest('home/user/del_comment', {
								id: e.id
							}, 'POST').then(res2 => {
								if (index2 || index2 === 0) {
									that.commentList[index].pid.splice(index2, 1);
								} else {
									that.commentList.splice(index, 1);
								}

							});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			onCopy() {
				let that = this;
				uni.setClipboardData({
					data: this.postDetail.content,
					success: function() {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			// 评论点赞
			onThumb(item, index, index2) {
				let data = {
					id: this.postId,
					is_like: item.is_like == 1 ? 0 : 1,
					pid: item.id
				}
				this.$myRuquest('home/user/like_comment', data, 'POST')
					.then(res => {
						// if (index2 || index2 == 0) {
						this.commentList[index].is_like = item.is_like != 1?1:0;
						this.commentList[index].count += item.is_like !== 1 ? -1 : 1;
						console.log(item.is_like)
						// } else {
						// this.commentList[index].pid[index2].is_like = item.is_like!=1;
						// this.commentList[index].pid[index2].count+=item.is_like==1?-1:1;

						// 	// this.commentList[index].is_like = item.is_like!=1;
						// 	// this.commentList[index].count++;
						// }

					});
			},

			// 回复评论
			onReply(e) {
				console.log(e)
				this.placeholder = '回复：' + e.user.user;
				this.focus = true;
				this.form.pid = e.id;
			},
			// 输入框失去焦点时
			onBlur() {
				this.placeholder = '说点什么...';
				this.focus = false;
				this.form.pid = 0;
			},
			// 获取评论列表
			// getCommentList() {
			// 	this.loadStatus = 'loading';
			// 	this.$H
			// 		.get('comment/list', {
			// 			post_id: this.postId,
			// 			page: this.page
			// 		})
			// 		.then(res => {
			// 			if (res.code == 1) {
			// 				this.commentList = this.commentList.concat(res.result.data);

			// 				if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
			// 					this.loadStatus = 'nomore';
			// 				} else {
			// 					this.loadStatus = 'loadmore';
			// 				}
			// 			}
			// 		});
			// },
			addComment() {
				this.isSubmitD = true;
				if (this.form.comment == '') {
					this.$u.toast('评论不能为空');
					this.isSubmitD = false;
					return;
				}

				uni.showLoading({
					mask: true,
					title: '发布中'
				});

				this.$myRuquest('home/user/reply_comments', this.form, 'POST').then(res => {
					this.form.comment = '';
					this.$u.toast('评论成功');
					this.page = 1;
					this.commentList = [];
					this.getPostDetail();
					// this.getCommentList();

					this.isSubmitD = false;
					uni.hideLoading();
				}).catch(err=>{
					this.isSubmitD = false;
				});
			},
			getPostDetail() {
				this.$myRuquest('home/index/trends_detail', {
					id: this.postId,
					type:this.type
				}).then(res => {
					this.postDetail = res.data.data[0];
					this.commentList = this.postDetail.comment
					this.postUser=this.postDetail.user
				});
			},

			addCollection() {
				let data = {
					id: this.postDetail.id,
					is_like: this.postDetail.status == 1 ? 0 : 1,
					pid:0
				}	
				this.$myRuquest('home/user/like_comment', data, 'POST').then(res=>{
					this.postDetail.status=data.is_like
					this.postDetail.like_count+=data.is_like==1?1:-1
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.post-title {
		margin: 20rpx 0;
	}

	.icon text {
		font-size: 12px;
		color: #999;
		margin-right: 20rpx;
	}



	/*评论列表*/
	.comment-box {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx;
		.top-box{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.title {
				
			}
			.sort-btn{
				display: flex;
				align-items: center;
				padding: 5rpx 14rpx;
				border-radius: 22rpx;
				box-shadow: 2rpx 2rpx 4rpx #f5f5f5;
				font-size: 28rpx;
				color: #333;
				border: 2rpx solid #f5f5f5;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
			
		}
	}



	.comment-item {
		display: flex;
		padding: 20rpx;

		&:active {
			background-color: #f5f5f5;
		}

		.c-content {
			display: flex;
			flex-direction: column;
			flex: 1;

			.time {
				color: #999;
				font-size: 10px;

			}

			.user {
				display: flex;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}

	.sub-comment-item {
		margin-left: 100rpx;
		padding: 20rpx;

		&:active {
			background-color: #f5f5f5;
		}

		.user {
			display: flex;
			align-items: center;

			.name {
				color: #616161;
			}

			.avatar {
				margin-right: 10rpx;
			}

			.u-head {
				flex: 1;
				display: flex;
				font-size: 28rpx;

				.thumbs {
					margin-left: auto;
					display: flex;
					align-items: center;
					color: #bfbfbf;

					.num {
						margin-right: 10rpx;
					}
				}
			}
		}

		.reply {
			font-size: 28rpx;
			margin-left: 70rpx;

			.time {
				margin-left: auto;
				font-size: 20rpx;
				color: #999;
				margin-top: 10rpx;
			}

			.name {
				display: inline-block;
				color: $theme-color;
				font-weight: 600;
				margin-left: 5rpx;
			}
		}
	}

	.look-comment {
		text-align: center;
		font-size: 28rpx;
		color: #ccc;
		padding-left: 100rpx;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: -80rpx;
			left: 0;
			width: 100%;
			height: 80rpx;
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 1));
		}

		transform: translateY(-20rpx);
		background-color: #ffffff;
	}

	/* 评论tool */
	.comment-tool {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		z-index: 999;
	}

	.comment-tool textarea {
		background-color: #f5f5f5;
		padding: 20rpx;
		border-radius: 10rpx;
		min-height: 40rpx;
	}

	.comment-tool .u-btn {
		margin-left: 10rpx;
	}

	// 分享弹窗
	.share-wrap {
		display: flex;
		padding: 30rpx;
		width: 60%;
		margin: 0 auto;

		.share-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			&:nth-child(1) {
				margin-right: auto;
			}

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}

	//海报弹窗
	.canvas-box {
		height: 560px;
		position: relative;

		.footer {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			right: 20rpx;
		}
	}

	.expire-box {
		background-color: #999;
		color: #fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}










	.post-item {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1px solid #F5F5F5;

		.post-content {
			margin-top: 20rpx;
			margin-left: 100rpx;

			.img-style-1 {
				display: block;
				width: 50%;
				max-height: 600rpx;
				border-radius: 5px;
				overflow: hidden;
			}

			.img-style-2 {
				display: flex;

				image {
					margin: 5rpx;
					border-radius: 5px;
					width: 100%;
					height: 294rpx;
				}
			}

			.img-style-3 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 31.3%;
					height: 200rpx;
					margin: 1%;
					border-radius: 5px;
				}
			}
		}

		.address {
			display: inline-flex;
			font-size: 20rpx;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			padding: 5rpx 20rpx;
			margin: 20rpx 0;

			.text {
				margin-left: 5rpx;
			}
		}
	}

	.post-item-top-user {
		display: flex;
		align-items: center;

		.avatar {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.center {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: #999;

			.username {
				font-size: 32rpx;
				font-weight: 600;
				color: #616161;
			}

			.official {
				display: inline-block;
				font-size: 20rpx;
				color: #fff;
				background-color: $theme-color;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			height: 85rpx;

			.arrow-down {
				color: #999;
			}
		}
	}

	.p-footer {
		display: flex;
		margin: 20rpx 0;
		// margin-left:100rpx;

		.p-item {
			margin: 0 auto;
			color: #616161;
			display: flex;
			align-items: center;
			position: relative;
			button{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 9;
				opacity: 0;
			}

			.count {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}

		.p-item[hidden] {
			display: none !important;
		}
	}

	.comment-wrap {
		font-size: 28rpx;
		padding-top: 20rpx;
		border-top: 1px solid #f5f5f5;

		.item {
			.name {
				color: #000;
				font-weight: 600;
			}
		}
	}

	.post-content-wrap {
		margin-bottom: 20rpx;

		.discuss-item {
			display: inline-block;
			color: #2b85e4;
			margin-right: 20rpx;
		}
	}
</style>
